<template>
  <div class="training-class-page">
    <!-- 顶部培训班信息 -->
    <div class="top-info">
      <span class="info-item">培训班编号：TR20250915001</span>
      <span class="info-item">培训班名称：2025年度特种设备安全管理培训班</span>
      <span class="info-item">培训时间：2025-09-20 至 2025-10-10</span>
      <span class="info-item">培训地点：安全技术培训中心</span>
    </div>

    <!-- 搜索区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="search-form"
      label-width="60px"
      v-if="showSearch"
    >
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入姓名" style="width: 160px;" />
      </el-form-item>
      <el-form-item label="手机号码" label-width="80px">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号码" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="证件编号" label-width="80px">
        <el-input v-model="searchForm.idCard" placeholder="请输入证件编号" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="是否拆分" label-width="80px">
        <el-select v-model="searchForm.isSplit" placeholder="选择是否拆分" style="width: 160px;">
          <el-option label="全部" value="" />
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 功能操作按钮组：分组可视化，优化hover交互 -->
    <div class="button-groups">
      <el-col :span="24">
        <!-- 班级数据组 -->
        <el-button-group>
          <el-button disabled>班级数据</el-button>
          <el-button
            type="primary"
            plain
            @click="handleUpdateSingle"
            v-hasPermi="['TrainingClass:TrainingClass:edit']"
            style="margin-left: 4px;border: none;"
          >编辑班级信息</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:setMembers']"
            style="margin-left: 4px;border: none;"
            @click="handleSetMembers"
          >设置班级信息</el-button>
        </el-button-group>

        <!-- 班级报名组 -->
        <el-button-group style="margin-left: 10px;">
          <el-button disabled>班级报名</el-button>
          <el-button
            type="primary"
            plain
            @click="handleCode"
            v-hasPermi="['TrainingClass:TrainingClass:export']"
            style="margin-left: 4px;border: none;"
          >班级二维码</el-button>
          <el-button
            type="primary"
            plain
            @click="handleEnroll"
            v-hasPermi="['TrainingClass:TrainingClass:enroll']"
            style="margin-left: 4px;border: none;"
          >报名</el-button>
          <el-button
            type="primary"
            plain
            @click="toggleSearch"
            style="margin-left: 200px;border: none;"
          >{{ showSearch ? '隐藏搜索' : '显示搜索' }}</el-button>
          <el-button
            type="primary"
            plain
            @click="handleRefresh"
            style="margin-left: 4px;border: none;"
          >刷新</el-button>
        </el-button-group>
      </el-col>

      <el-col :span="24" style="margin-top: 10px;">
        <!-- 学员管理组 -->
        <el-button-group>
          <el-button disabled>学员管理</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:classStudents']"
            style="margin-left: 4px;border: none;"
            @click="handleClassStudents"
          >班级学员</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:studentEnter']"
            style="margin-left: 4px;border: none;"
            @click="handleStudentEnter"
          >学员进出班</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:classHandover']"
            style="margin-left: 4px;border: none;"
            @click="handleClassHandover"
          >班级交接</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:trainingReservation']"
            style="margin-left: 4px;border: none;"
            @click="handleTrainingReservation"
          >培训预约情况</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:studentNotice']"
            style="margin-left: 4px;border: none;"
            @click="sendBatchNotice"
          >学员通知</el-button>
          <el-button
            type="primary"
            plain
            :disabled="!hasSingleSelection"
            v-hasPermi="['TrainingClass:TrainingClass:viewStudentDetail']"
            style="margin-left: 4px;border: none;"
            @click="viewDetails"
          >查看学员详情</el-button>
          <el-button
            type="primary"
            plain
            :disabled="!hasSelection"
            v-hasPermi="['TrainingClass:TrainingClass:studentRemark']"
            style="margin-left: 4px;border: none;"
            @click="batchRemark"
          >学员备注</el-button>
        </el-button-group>
      </el-col>

      <el-col :span="24" style="margin-top: 10px;">
        <!-- 过程管理组 -->
        <el-button-group>
          <el-button disabled>过程管理</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:signIn']"
            style="margin-left: 4px;border: none;"
            @click="handleSignIn"
          >签到</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:signInStatus']"
            style="margin-left: 4px;border: none;"
            @click="handleSignInStatus"
          >签到情况</el-button>

          <el-button disabled style="margin-left: 40px;">班级维护</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:classRemark']"
            style="margin-left: 4px;border: none;"
            @click="handleClassRemark"
          >班级备注</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:exportClassDetail']"
            style="margin-left: 4px;border: none;"
            @click="handleExport"
          >班级详情导出</el-button>
          <el-button
            type="danger"
            plain
            @click="deleteRecords"
            v-hasPermi="['TrainingClass:TrainingClass:remove']"
            style="margin-left: 4px;border: none;"
            :disabled="!hasSelection"
          >删除</el-button>

          <el-button
            plain
            disabled
            v-hasPermi="['TrainingClass:TrainingClass:classSettlement']"
            @click="handleClassSettlement"
            style="margin-left: 40px;"
          >班级结算</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:feeSettlement']"
            @click="handleFeeSettlement"
            style="margin-left: 4px;border: none;"
          >费用结算</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:exportFeeSettlement']"
            @click="handleExportFeeSettlement"
            style="margin-left: 4px;border: none;"
          >费用结算导出</el-button>
          <el-button
            type="primary"
            plain
            v-hasPermi="['TrainingClass:TrainingClass:splitProject']"
            style="margin-left: 4px;border: none;"
            @click="splitProjectDialogVisible = true"
            :disabled="!hasSingleSelection"
          >拆分项目</el-button>
        </el-button-group>
      </el-col>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%;margin-top: 15px;"
      v-loading="tableLoading"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="name" label="姓名" width="90" />
      <el-table-column prop="idCard" label="证件编号" width="180" />
      <el-table-column prop="gender" label="性别" width="70" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="company" label="单位名称" width="160" />
      <el-table-column prop="registrationSource" label="报名来源" width="130" />
      <el-table-column prop="trainingType" label="培训类型" width="100" />
      <el-table-column prop="paymentStatus" label="缴费状态" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.paymentStatus === '已缴费' ? '#27ae60' : '#e74c3c' }">
            {{ scope.row.paymentStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="paymentAmount" label="缴费金额" width="110" />
      <el-table-column prop="applicationStatus" label="申请表提交状态" width="140" />
      <el-table-column prop="registrationTime" label="报名时间" width="160" />
      <el-table-column prop="isSplit" label="是否拆分" width="90" />
      <el-table-column prop="trainingItems" label="培训项目" width="150" />
      <el-table-column prop="extraAmount" label="1+X增项金额" width="120" />
      <el-table-column prop="splitTime" label="拆分时间" width="160" />
      <el-table-column prop="remark" label="备注" width="120" />
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleRemark(scope.row)">备注</el-button>
          <el-button
            type="text"
            v-if="scope.row.paymentStatus === '未缴费'"
            @click="handleDelete(scope.row)"
            style="color: #e74c3c;"
          >
            删除
          </el-button>
          <el-button
            type="text"
            v-if="scope.row.isSplit === '是'"
            @click="handleRefundItem(scope.row)"
            style="color: #3498db;"
          >
            退项
          </el-button>
          <el-button type="text" @click="handleSendNotice(scope.row)">通知</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog
      title="报名详情"
      :visible.sync="viewDialogVisible"
      width="600px"
      @close="handleCloseView"
    >
      <el-form :model="currentItem" label-width="120px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编号">
              <span>{{ currentItem.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <span>{{ currentItem.name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="证件编号">
              <span>{{ currentItem.idCard }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <span>{{ currentItem.gender }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话">
              <span>{{ currentItem.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称">
              <span>{{ currentItem.company }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报名来源">
              <span>{{ currentItem.registrationSource }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训类型">
              <span>{{ currentItem.trainingType }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缴费状态">
              <span :style="{ color: currentItem.paymentStatus === '已缴费' ? '#27ae60' : '#e74c3c' }">
                {{ currentItem.paymentStatus }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费金额">
              <span>{{ currentItem.paymentAmount }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申请表提交状态">
              <span>{{ currentItem.applicationStatus }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名时间">
              <span>{{ currentItem.registrationTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否拆分">
              <span>{{ currentItem.isSplit }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训项目">
              <span>{{ currentItem.trainingItems }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="1+X增项金额">
              <span>{{ currentItem.extraAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拆分时间">
              <span>{{ currentItem.splitTime || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <span>{{ currentItem.remark || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseView">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 备注弹窗 -->
    <el-dialog
      :title="remarkDialogTitle"
      :visible.sync="remarkDialogVisible"
      width="500px"
      size="mini"
    >
      <el-form :model="remarkForm" class="remark-form" ref="remarkFormRef">
        <el-form-item
          label="备注内容"
          label-width="80px"
          prop="content"
          :rules="[{ required: true, message: '请输入备注内容', trigger: 'blur' }]"
        >
          <el-input
            type="textarea"
            v-model="remarkForm.content"
            placeholder="请输入备注内容"
            rows="4"
            class="remark-textarea"
          />
        </el-form-item>
        <el-form-item label="备注历史" label-width="80px">
          <el-table
            :data="remarkHistory"
            border
            stripe
            size="mini"
            :cell-style="{ 'vertical-align': 'middle' }"
            style="width: 100%;"
          >
            <el-table-column prop="time" label="时间" align="center" width="160" />
            <el-table-column prop="person" label="备注人" align="center" width="100" />
            <el-table-column prop="content" label="备注" align="left" />
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="remarkDialogVisible = false">取消</el-button>
          <el-button size="mini" type="primary" @click="submitRemark">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 发送通知弹窗 -->
    <el-dialog
      title="发送学员通知"
      :visible.sync="noticeDialogVisible"
      width="500px"
    >
      <el-form :model="noticeForm" ref="noticeFormRef" :rules="noticeRules">
        <el-form-item label="通知标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入通知标题"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input
            type="textarea"
            v-model="noticeForm.content"
            placeholder="请输入通知内容"
            rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="发送方式">
          <el-checkbox-group v-model="noticeMethods">
            <el-checkbox label="短信">短信</el-checkbox>
            <el-checkbox label="微信">微信</el-checkbox>
            <el-checkbox label="邮件">邮件</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNotice">发送</el-button>
      </div>
    </el-dialog>

    <!-- 项目拆分弹窗 -->
    <el-dialog
      title="项目拆分"
      :visible.sync="splitProjectDialogVisible"
      width="1500px"
      @close="handleCloseSplitProject"
    >
      <div class="split-project-container">
        <!-- 左侧培训项目树 -->
        <div class="project-tree-container">
          <el-input
            v-model="projectSearch"
            placeholder="[搜索]请输入培训项目"
            class="project-search"
            prefix-icon="el-icon-search"
          />
          <el-tree
            ref="projectTree"
            :data="projectTreeData"
            :props="treeProps"
            :filter-node-method="filterProject"
            default-expand-all
            @node-click="handleProjectSelect"
            show-checkbox
            class="project-tree"
          />
        </div>

        <!-- 右侧表单区域 -->
        <div class="form-container">
          <!-- 报名信息1 -->
          <div class="form-section">
            <h3 class="section-title">报名信息</h3>
            <el-table
              :data="selectedStudentInfo"
              border
              style="width: 100%;"
              size="mini"
            >
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="idCard" label="证件号码" width="200" />
              <el-table-column prop="phone" label="电话号码" width="150" />
              <el-table-column label="文化程度">
                <template #default>
                  <el-select placeholder="请选择文化程度" style="width: 150px;">
                    <el-option label="小学" value="primary" />
                    <el-option label="初中" value="junior" />
                    <el-option label="高中" value="senior" />
                    <el-option label="大专" value="college" />
                    <el-option label="本科" value="bachelor" />
                    <el-option label="硕士及以上" value="master" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="工作单位">
                <template #default>
                  <el-input placeholder="请输入工作单位" style="width: 100%;" />
                </template>
              </el-table-column>
              <el-table-column prop="paymentAmount" label="缴费金额" width="120" />
            </el-table>
          </div>

          <!-- 报名信息2 -->
          <div class="form-section">
            <h3 class="section-title">报名信息</h3>
            <el-form-item label="是否为增项学员">
              <el-radio-group v-model="splitForm.isExtraItem">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 培训项目 -->
          <div class="form-section">
            <h3 class="section-title">培训项目</h3>
            <el-table
              :data="selectedProjects"
              border
              style="width: 100%;"
              size="mini"
            >
              <el-table-column prop="index" label="序号" width="80" />
              <el-table-column prop="name" label="培训项目" width="200" />
              <el-table-column prop="baseAmount" label="基准金额" width="150">
                <template #default>
                  <el-input type="number" placeholder="0.00" style="width: 100%;" />
                </template>
              </el-table-column>
              <el-table-column prop="extraAmount" label="1+X金额" width="150">
                <template #default>
                  <el-input type="number" placeholder="0.00" style="width: 100%;" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="handleDeleteProject(scope.$index)"
                    style="color: #e74c3c;"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 拆分信息 -->
          <div class="form-section">
            <h3 class="section-title">拆分信息</h3>
            <el-form-item label="拆分时间">
              <el-date-picker
                v-model="splitForm.splitTime"
                type="datetime"
                placeholder="请选择拆分时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="拆分备注">
              <el-input
                type="textarea"
                v-model="splitForm.splitRemark"
                placeholder="请输入拆分备注信息"
                rows="2"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseSplitProject">取消</el-button>
        <el-button type="primary" @click="handleSubmitSplitProject">提交</el-button>
      </div>
    </el-dialog>

    <!-- 班级二维码弹窗 -->
    <el-dialog
      title="班级二维码"
      :visible.sync="qrCodeVisible"
      width="300px"
    >
      <div class="qr-code-container">
        <div class="qr-code-placeholder">
          <i class="el-icon-qrcode"></i>
          <p>班级二维码</p>
          <p style="font-size: 12px; color: #666;">TR20250915001</p>
        </div>
        <p style="text-align: center; margin-top: 15px;">扫码加入培训班</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qrCodeVisible = false">关闭</el-button>
        <el-button type="primary" @click="printQrCode">打印</el-button>
      </div>
    </el-dialog>

    <!-- 确认操作弹窗 -->
    <el-dialog
      title="确认操作"
      :visible.sync="confirmDialogVisible"
      width="400px"
    >
      <p>{{ confirmMessage }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TrainingManagementWithGroupedButtons",
  data() {
    return {
      // 搜索表单数据
      searchForm: {
        name: "",
        phone: "",
        idCard: "",
        isSplit: "",
        paymentStatus: ""
      },

      // 表格数据
      tableData: [
        {
          id: "TR20250915001-001",
          name: "张三",
          idCard: "110101199001011234",
          gender: "男",
          phone: "13800138000",
          company: "北京某某设备有限公司",
          registrationSource: "个人线上报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "1200.00",
          applicationStatus: "已提交",
          registrationTime: "2025-09-01 09:30:25",
          isSplit: "是",
          trainingItems: "",
          extraAmount: "",
          splitTime: "",
          remark: "优先安排上午培训"
        },
        {
          id: "TR20250915001-001-1",
          name: "张三",
          idCard: "110101199001011234",
          gender: "男",
          phone: "13800138000",
          company: "北京某某设备有限公司",
          registrationSource: "个人线上报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "",
          applicationStatus: "",
          registrationTime: "",
          isSplit: "",
          trainingItems: "特种设备安全管理",
          extraAmount: "300.00",
          splitTime: "2025-09-05 14:20:10",
          remark: ""
        },
        {
          id: "TR20250915001-001-2",
          name: "张三",
          idCard: "110101199001011234",
          gender: "男",
          phone: "13800138000",
          company: "北京某某设备有限公司",
          registrationSource: "个人线上报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "",
          applicationStatus: "",
          registrationTime: "",
          isSplit: "",
          trainingItems: "锅炉作业/工业锅炉司炉",
          extraAmount: "450.00",
          splitTime: "2025-09-05 14:20:10",
          remark: ""
        },
        {
          id: "TR20250915001-002",
          name: "李四",
          idCard: "310101199203155678",
          gender: "男",
          phone: "13912345678",
          company: "上海某某重工集团",
          registrationSource: "企业统一报名",
          trainingType: "复训",
          paymentStatus: "已缴费",
          paymentAmount: "800.00",
          applicationStatus: "已提交",
          registrationTime: "2025-09-02 10:15:30",
          isSplit: "否",
          trainingItems: "压力容器作业/快开门式",
          extraAmount: "",
          splitTime: "",
          remark: ""
        },
        {
          id: "TR20250915001-003",
          name: "王五",
          idCard: "440101198807239012",
          gender: "女",
          phone: "13787654321",
          company: "广州某某电梯有限公司",
          registrationSource: "个人线下报名",
          trainingType: "新训",
          paymentStatus: "未缴费",
          paymentAmount: "",
          applicationStatus: "已提交",
          registrationTime: "2025-09-03 15:40:18",
          isSplit: "",
          trainingItems: "电梯作业/电梯修理",
          extraAmount: "200.00",
          splitTime: "",
          remark: "需电话提醒缴费"
        },
        {
          id: "TR20250915001-004",
          name: "赵六",
          idCard: "510101199511053456",
          gender: "男",
          phone: "13678901234",
          company: "成都某某游乐设施公司",
          registrationSource: "企业统一报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "1500.00",
          applicationStatus: "未提交",
          registrationTime: "2025-09-04 09:10:55",
          isSplit: "是",
          trainingItems: "",
          extraAmount: "",
          splitTime: "",
          remark: ""
        },
        {
          id: "TR20250915001-004-1",
          name: "赵六",
          idCard: "510101199511053456",
          gender: "男",
          phone: "13678901234",
          company: "成都某某游乐设施公司",
          registrationSource: "企业统一报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "",
          applicationStatus: "",
          registrationTime: "",
          isSplit: "",
          trainingItems: "大型游乐设施作业",
          extraAmount: "600.00",
          splitTime: "2025-09-06 11:30:22",
          remark: ""
        },
        {
          id: "TR20250915001-005",
          name: "孙七",
          idCard: "120101199305187890",
          gender: "女",
          phone: "13567890123",
          company: "天津某某计量检测所",
          registrationSource: "个人线上报名",
          trainingType: "新训",
          paymentStatus: "未缴费",
          paymentAmount: "",
          applicationStatus: "未提交",
          registrationTime: "2025-09-05 16:25:40",
          isSplit: "",
          trainingItems: "计量/计量管理",
          extraAmount: "",
          splitTime: "",
          remark: ""
        },
        {
          id: "TR20250915001-006",
          name: "周八",
          idCard: "330101198709212345",
          gender: "男",
          phone: "13456789012",
          company: "杭州某某起重机厂",
          registrationSource: "企业统一报名",
          trainingType: "复训",
          paymentStatus: "已缴费",
          paymentAmount: "750.00",
          applicationStatus: "已提交",
          registrationTime: "2025-09-06 10:50:12",
          isSplit: "否",
          trainingItems: "起重机作业",
          extraAmount: "",
          splitTime: "",
          remark: "有特殊饮食需求"
        },
        {
          id: "TR20250915001-007",
          name: "吴九",
          idCard: "420101199103086789",
          gender: "男",
          phone: "13345678901",
          company: "武汉某某气瓶检测站",
          registrationSource: "个人线下报名",
          trainingType: "新训",
          paymentStatus: "已缴费",
          paymentAmount: "900.00",
          applicationStatus: "已提交",
          registrationTime: "2025-09-07 14:15:33",
          isSplit: "否",
          trainingItems: "压力容器作业/气瓶充装",
          extraAmount: "150.00",
          splitTime: "",
          remark: ""
        }
      ],

      // 分页数据
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 42 // 总记录数
      },

      // 表格加载状态
      tableLoading: false,

      // 选中的数据
      selection: [],

      // 查看详情弹窗
      viewDialogVisible: false,
      currentItem: {},

      // 备注弹窗
      remarkDialogVisible: false,
      remarkDialogTitle: "学员备注",
      remarkForm: {
        content: ""
      },
      remarkHistory: [],

      // 发送通知弹窗
      noticeDialogVisible: false,
      noticeForm: {
        title: "",
        content: ""
      },
      noticeRules: {
        title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入通知内容", trigger: "blur" }]
      },
      noticeMethods: ["短信", "微信"],

      // 项目拆分弹窗
      splitProjectDialogVisible: false,
      projectSearch: "",
      projectTreeData: [
        {
          label: "特种设备培训",
          children: [
            { label: "特种设备安全管理" },
            {
              label: "锅炉作业",
              children: [
                { label: "工业锅炉司炉" },
                { label: "电站锅炉司炉" },
                { label: "锅炉水处理" }
              ]
            },
            {
              label: "压力容器作业",
              children: [
                { label: "快开门式压力容器操作" },
                { label: "移动式压力容器充装" },
                { label: "氧舱维护保养" },
                { label: "气瓶充装" }
              ]
            },
            {
              label: "电梯作业",
              children: [
                { label: "电梯修理" }
              ]
            },
            { label: "起重机作业" },
            { label: "场(厂)内专用机动车辆作业" },
            { label: "客运索道作业" },
            { label: "大型游乐设施作业" },
            { label: "安全附件维修作业" },
            { label: "特种设备焊接作业" }
          ]
        },
        {
          label: "特种作业",
          children: [
            { label: "电工作业" },
            { label: "焊接与热切割作业" },
            { label: "高处作业" },
            { label: "制冷与空调作业" }
          ]
        },
        {
          label: "计量",
          children: [
            { label: "计量管理" },
            { label: "计量内校" }
          ]
        }
      ],
      treeProps: {
        children: "children",
        label: "label"
      },
      splitForm: {
        isExtraItem: "否", // 初始化字段，与 el-form-item 绑定对应
        splitTime: "",
        splitRemark: ""
      },
      selectedProjects: [
        { index: 1, name: "特种设备安全管理", baseAmount: "500.00", extraAmount: "300.00" },
        { index: 2, name: "锅炉作业/工业锅炉司炉", baseAmount: "600.00", extraAmount: "150.00" }
      ],
      selectedStudentInfo: [],
      splitTime: "",
      splitRemark: "",

      // 班级二维码弹窗
      qrCodeVisible: false,

      // 确认操作弹窗
      confirmDialogVisible: false,
      confirmMessage: "",
      confirmCallback: null,

      // 搜索区域显示状态
      showSearch: true
    };
  },
  computed: {
    // 是否有选中项
    hasSelection() {
      return this.selection.length > 0;
    },
    // 是否只有一个选中项
    hasSingleSelection() {
      return this.selection.length === 1;
    },
    topInfo() {
      return {
        classId: "TR20250915001",
        classTitle: "2025年度特种设备安全管理培训班"
      };
    }
  },
  methods: {
    // 搜索和重置
    handleSearch() {
      this.tableLoading = true;
      console.log("搜索条件:", this.searchForm);

      // 模拟API请求延迟
      setTimeout(() => {
        this.tableLoading = false;
        this.pagination.currentPage = 1;
        this.$message.success("搜索完成");
      }, 800);
    },
    handleReset() {
      this.searchForm = {
        name: "",
        phone: "",
        idCard: "",
        isSplit: "",
        paymentStatus: ""
      };
    },

    // 表格选择事件
    handleSelectionChange(selection) {
      this.selection = selection;
    },

    // 分页事件
    handleSizeChange(val) {
      this.tableLoading = true;
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;

      // 模拟API请求延迟
      setTimeout(() => {
        this.tableLoading = false;
      }, 600);
    },
    handleCurrentChange(val) {
      this.tableLoading = true;
      this.pagination.currentPage = val;

      // 模拟API请求延迟
      setTimeout(() => {
        this.tableLoading = false;
      }, 600);
    },

    // 查看详情
    handleView(row) {
      this.currentItem = { ...row };
      this.viewDialogVisible = true;
    },
    viewDetails() {
      if (this.selection.length === 1) {
        this.handleView(this.selection[0]);
      }
    },
    handleCloseView() {
      this.viewDialogVisible = false;
    },

    // 备注
    handleRemark(row) {
      this.remarkDialogVisible = true;
      this.remarkDialogTitle = `学员 ${row.name} 的备注`;
      this.remarkForm.content = row.remark || "";

      // 模拟加载备注历史
      this.remarkHistory = [
        { time: "2025-09-01 09:30", person: "系统管理员", content: "首次报名" },
        { time: "2025-09-05 14:20", person: "李老师", content: row.remark || "无备注" }
      ];
    },
    batchRemark() {
      this.remarkDialogVisible = true;
      this.remarkDialogTitle = `批量备注（${this.selection.length}名学员）`;
      this.remarkForm.content = "";
      this.remarkHistory = [];
    },
    submitRemark() {
      this.$refs.remarkFormRef.validate(valid => {
        if (valid) {
          // 模拟保存备注
          setTimeout(() => {
            this.$message.success("备注添加成功");
            this.remarkDialogVisible = false;

            // 更新表格中的备注信息
            if (this.remarkDialogTitle.includes("批量")) {
              this.selection.forEach(sel => {
                const item = this.tableData.find(t => t.id === sel.id);
                if (item) item.remark = this.remarkForm.content;
              });
            } else {
              const item = this.tableData.find(t => t.name === this.remarkDialogTitle.split(" ")[1]);
              if (item) item.remark = this.remarkForm.content;
            }
          }, 500);
        }
      });
    },

    // 删除
    handleDelete(row) {
      this.confirmMessage = `确定要删除 ${row.name} 的报名记录吗？`;
      this.confirmCallback = () => {
        this.tableData = this.tableData.filter(item => item.id !== row.id);
        this.pagination.total--;
        this.$message.success("删除成功");
      };
      this.confirmDialogVisible = true;
    },
    deleteRecords() {
      this.confirmMessage = `确定要删除选中的 ${this.selection.length} 条记录吗？`;
      this.confirmCallback = () => {
        const ids = this.selection.map(item => item.id);
        this.tableData = this.tableData.filter(item => !ids.includes(item.id));
        this.pagination.total -= this.selection.length;
        this.selection = [];
        this.$message.success("删除成功");
      };
      this.confirmDialogVisible = true;
    },

    // 退项
    handleRefundItem(row) {
      this.confirmMessage = `确定要为 ${row.name} 办理退项吗？`;
      this.confirmCallback = () => {
        this.$message.success("退项申请已提交");
      };
      this.confirmDialogVisible = true;
    },

    // 发送通知
    handleSendNotice(row) {
      this.noticeDialogVisible = true;
      this.noticeForm = {
        title: `关于${row.name}的培训通知`,
        content: `尊敬的${row.name}学员，您报名的${this.topInfo.classTitle}将于指定时间开始，请做好准备。`
      };
    },
    sendBatchNotice() {
      if (!this.hasSelection) {
        this.confirmMessage = "未选择学员，是否向所有学员发送通知？";
        this.confirmCallback = () => {
          this.openNoticeDialogForBatch();
        };
        this.confirmDialogVisible = true;
      } else {
        this.openNoticeDialogForBatch();
      }
    },
    openNoticeDialogForBatch() {
      this.noticeDialogVisible = true;
      this.noticeForm = {
        title: "培训班通知",
        content: `尊敬的学员，您报名的${this.topInfo.classTitle}将于指定时间开始，请做好准备。`
      };
    },
    submitNotice() {
      this.$refs.noticeFormRef.validate(valid => {
        if (valid) {
          if (this.noticeMethods.length === 0) {
            this.$message.warning("请选择至少一种发送方式");
            return;
          }

          // 模拟发送通知
          setTimeout(() => {
            this.$message.success("通知发送成功");
            this.noticeDialogVisible = false;
          }, 800);
        }
      });
    },

    // 项目拆分弹窗相关
    filterProject(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },
    handleProjectSelect(data) {
      console.log("选择的培训项目:", data);
      // 检查是否已添加
      const exists = this.selectedProjects.some(p => p.name === data.label);
      if (!exists) {
        this.selectedProjects.push({
          index: this.selectedProjects.length + 1,
          name: data.label,
          baseAmount: "0.00",
          extraAmount: "0.00"
        });
      }
    },
    handleDeleteProject(index) {
      this.selectedProjects.splice(index, 1);
      // 重新生成序号
      this.selectedProjects.forEach((item, i) => {
        item.index = i + 1;
      });
    },
    handleSubmitSplitProject() {
      if (this.selectedProjects.length === 0) {
        this.$message.warning("请至少选择一个培训项目");
        return;
      }

      if (!this.splitTime) {
        this.$message.warning("请选择拆分时间");
        return;
      }

      // 模拟提交拆分
      setTimeout(() => {
        this.$message.success("项目拆分成功");
        this.splitProjectDialogVisible = false;
      }, 1000);
    },
    handleCloseSplitProject() {
      this.splitProjectDialogVisible = false;
    },

    // 按钮组事件处理
    handleUpdateSingle() {
      this.$message.info("打开班级信息编辑表单");
    },
    handleSetMembers() {
      this.$message.info("打开班级成员设置表单");
    },
    handleCode() {
      this.qrCodeVisible = true;
    },
    handleEnroll() {
      this.$message.info("打开报名表单");
    },
    toggleSearch() {
      this.showSearch = !this.showSearch;
    },
    handleRefresh() {
      this.tableLoading = true;
      // 模拟刷新数据
      setTimeout(() => {
        this.tableLoading = false;
        this.$message.success("数据已刷新");
      }, 800);
    },
    toggleSort() {
      this.$message.info("打开列显示/排序设置");
    },
    handleClassStudents() {
      this.$message.info("查看班级学员列表");
    },
    handleStudentEnter() {
      this.$message.info("打开学员进出班管理");
    },
    handleClassHandover() {
      this.$message.info("打开班级交接表单");
    },
    handleTrainingReservation() {
      this.$message.info("查看培训预约情况");
    },
    handleSignIn() {
      this.$message.info("打开学员签到界面");
    },
    handleSignInStatus() {
      this.$message.info("查看签到情况统计");
    },
    handleClassRemark() {
      this.$message.info("打开班级备注编辑");
    },
    handleExport() {
      this.tableLoading = true;
      // 模拟导出
      setTimeout(() => {
        this.tableLoading = false;
        this.$message.success("导出成功，共导出42条记录");
      }, 1500);
    },
    handleClassSettlement() {
      this.$message.info("打开班级结算界面");
    },
    handleFeeSettlement() {
      this.$message.info("打开费用结算界面");
    },
    handleExportFeeSettlement() {
      this.$message.success("费用结算单导出成功");
    },

    // 二维码相关
    printQrCode() {
      this.$message.success("二维码打印指令已发送");
    },

    // 确认操作
    confirmAction() {
      if (typeof this.confirmCallback === "function") {
        this.confirmCallback();
      }
      this.confirmDialogVisible = false;
    }
  },
  watch: {
    projectSearch(val) {
      this.$refs.projectTree.filter(val);
    },
    splitProjectDialogVisible(visible) {
      if (visible && this.selection.length === 1) {
        // 当打开拆分弹窗且有一个选中项时，加载学员信息
        const student = this.selection[0];
        this.selectedStudentInfo = [{
          name: student.name,
          idCard: student.idCard,
          phone: student.phone,
          paymentAmount: student.paymentAmount
        }];
        this.splitTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
      }
    }
  },
};
</script>

<style scoped>
.training-class-page {
  padding: 15px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
}

/* 顶部信息 */
.top-info {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.info-item {
  display: inline-block;
  margin-right: 25px;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

/* 搜索区域 */
.search-form {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 按钮组样式 */
.button-groups {
  margin-bottom: 15px;
  padding: 10px 0;
}


/* 表格样式 */
::v-deep .el-table__header-wrapper th {
  background-color: #f5f7fa;
  font-weight: 500;
}

::v-deep .el-table__body tr:hover > td {
  background-color: #f9f9f9;
}

/* 分页 */
.pagination-container {
  margin-top: 15px;
  text-align: right;
  padding: 10px 0;
}

/* 弹窗样式 */
.detail-form {
  margin-top: 10px;
}

.remark-textarea {
  width: 100%;
}

/* 项目拆分弹窗样式 */
.split-project-container {
  display: flex;
  gap: 20px;
  height: 500px;
}

.project-tree-container {
  width: 280px;
  display: flex;
  flex-direction: column;
}

.project-search {
  margin-bottom: 10px;
}

.project-tree {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 5px;
}

.form-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

.form-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  color: #333;
}

/* 二维码弹窗 */
.qr-code-container {
  text-align: center;
  padding: 20px 0;
}

.qr-code-placeholder {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-code-placeholder i {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 10px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  ::v-deep .el-button-group .el-button {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 992px) {
  .split-project-container {
    flex-direction: column;
    height: auto;
    max-height: 600px;
  }

  .project-tree-container {
    width: 100%;
    margin-bottom: 15px;
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .top-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-item {
    margin-right: 0;
    width: 100%;
  }

  .button-groups {
    overflow-x: auto;
    padding-bottom: 10px;
  }

  ::v-deep .el-col {
    min-width: 100%;
  }

  .pagination-container {
    text-align: center;
  }

  ::v-deep .el-dialog__body {
    padding: 15px;
    max-height: 60vh;
    overflow-y: auto;
  }
}
</style>
